<template>
  <div class="index">
    <myheader></myheader>
    <div class="index-swiper">
      <mt-swipe :auto="2000" @change='getSwipeChange'>
        <mt-swipe-item v-for="(item, index) in goodsList" :key="index">
          <img :src="imgUrl+item.goods_thumb" alt="" style='width:100%;height:100%;'>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="good-desc">
      <mt-button type="primary" size="large" @click="jumpToDesc">{{imgIndex}}</mt-button>
      <div class="good-name">{{currentGood.goods_name}}</div>
      <div class="good-price">{{currentGood.market_price}}</div>
      <div class="good-id">{{currentGood.gid}}</div>
    </div>
    <div class="mapState">
      text: {{gid}}
    </div>
    <div class="num">
      num: {{num}}
    </div>
    <tabbar
      @click="getTabbarFn"
      ref='tabbar'
    >
    </tabbar>
  </div>
</template>

<script>

import { Swipe, SwipeItem, Button } from 'mint-ui'
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
import api from '../api/index'
import tabbar from '../components/tabbar'
import myheader from '../components/header'

export default {
  data() {
    return {
      imgUrl: this.$store.state.imgUrl,
      token: '',
      imgIndex: '',
      currentGood: ''
    }
  },
  components: {
    mtSwipe: Swipe,
    mtSwipeItem: SwipeItem,
    mtButton: Button,
    tabbar,
    myheader
  },
  methods: {
    // 直接触发子组件的事件
    getTabbarFn() {
      this.$refs.tabbar.jumpRouter()
    },
    ...mapMutations([
      'changeText'
    ]),
    ...mapActions([
      'getMyToken',
      'getGoods'
    ]),
    // 监听轮播图变化
    getSwipeChange(index) {
      this.imgIndex = index
      this.goodsList.forEach((item, i) => {
        if (i === index) {
          this.currentGood = this.goodsList[i]
          this.$store.commit('changeGid', this.goodsList[i].gid)
        }
      })
    },
    // 跳转到商品详情
    jumpToDesc() {
      this.$router.push({
        path: '/discover',
        query: {
          gid: this.currentGood.gid
        }
      })
    },
    // 获取商品详情
    _getGoodInfo(gid) {
      let data = {
        Token: localStorage.getItem('token'),
        user_id: this.$store.state.user_id,
        gid: gid
      }
      api.getGoodInfo(data).then(res => {
        console.log(res, '商品详情');
      })
    }
  },
  computed: {
    // stateNum() {
    //   return this.$store.state.num
    // },
    // stateGid() {
    //   return this.$store.state.gid
    // },
    ...mapState(['text', 'gid', 'num', 'goodsList']),
    // ...mapGetters(['text', 'gid', 'num'])
    // 重命名
    // ...mapState({
    //   newText: 'text',
    //   newGid: 'gid'
    // })
  },
  created() {
    // this._getApiToken()
    this.getMyToken()
    this.getGoods()
    setTimeout(() => {
      this.$store.commit('changeNum')
    }, 2000);
    // this.changeText('newText')
  }
}
</script>
<style lang="scss" scoped>
.index {
  font-size: 16px;
  min-height: 200px;
  .index-swiper{
    height: 200px;
    margin-bottom: 20px;
  }
}
</style>
